import { Component, PropsWithChildren } from 'react'
import { View, Text } from '@tarojs/components'
import { AtButton, AtTabs, AtTabsPane } from 'taro-ui'

import "taro-ui/dist/style/components/button.scss" // 按需引入
import './index.less'
import Taro from '@tarojs/taro'
import Aa from '../dev/index'

export default class Index extends Component<PropsWithChildren> {
  state = {
    aaa: 11,
    arr: [1, 2, 2],
    current: 0,
  }
  componentDidMount() {
    console.log(123)
  }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  add(val) {
    console.log('当前值-' + val)
    Taro.showToast({ title: '点击了' })
    Taro.showActionSheet({
      itemList: ['A', 'B', 'C'],
      success: function (res) {
        console.log(res.tapIndex)
      },
      fail: function (res) {
        console.log(res.errMsg)
      }
    })
  }
  handleClick (value) {
    this.setState({
      current: value
    })
  }
  render() {
    return (
      <View className='<%= pageName %>'>
        <AtTabs
  current={this.state.current}
  scroll
  tabList={[
    { title: '标签页1' },
    { title: '标签页2' },
    { title: '标签页3' },
    { title: '标签页4' },
    { title: '标签页5' },
    { title: '标签页6' }
  ]}
  onClick={this.handleClick.bind(this)}>
  <AtTabsPane current={this.state.current} index={0}>
    <View style='font-size:18px;text-align:center;height:100px;'>标签页一的内容</View>
  </AtTabsPane>
  <AtTabsPane current={this.state.current} index={1}>
    <View style='font-size:18px;text-align:center;height:100px;'>标签页二的内容</View>
  </AtTabsPane>
  <AtTabsPane current={this.state.current} index={2}>
    <View style='font-size:18px;text-align:center;height:100px;'>标签页三的内容</View>
  </AtTabsPane>
  <AtTabsPane current={this.state.current} index={3}>
    <View style='font-size:18px;text-align:center;height:100px;'>标签页四的内容</View>
  </AtTabsPane>
  <AtTabsPane current={this.state.current} index={4}>
    <View style='font-size:18px;text-align:center;height:100px;'>标签页五的内容</View>
  </AtTabsPane>
  <AtTabsPane current={this.state.current} index={5}>
    <View style='font-size:18px;text-align:center;height:100px;'>标签页六的内容</View>
  </AtTabsPane>
</AtTabs>
        <Aa />
        <Text>Hello world!</Text>
        <View>{this.state.aaa}</View>
        <Text>12</Text>
        {this.state.arr.map(item => <View key={item} onClick={this.add.bind(this, 122)} style={{ color: 'red' }}>{item}</View>)}
        <AtButton type='primary'>I need Taro UI</AtButton>
        <Text>Taro UI 支持 Vue 了吗？</Text>
        <AtButton type='primary' circle={true}>支持</AtButton>
        <Text>共建？</Text>
        <AtButton type='secondary' circle={true}>来</AtButton>
      </View>
    )
  }
}
